import React, { Component } from 'react';
import { View, Text,StyleSheet, ScrollView, ImageBackground } from 'react-native';
import Service from './Service';

export default class Index extends Component{
    render() {
        const uri = 'https://p3a.pstatp.com/weili/l/189459640379245199.jpg';

        return(
            <ScrollView>
                <ImageBackground source={{uri:uri}} style={{height: '100%', height: 160}}>
                </ImageBackground>
                <View>
                    <View style={styles.info}>
                        <Text style={{paddingTop:10,paddingBottom:15,fontSize:23,fontWeight:"600",lineHeight:30}}>融创-光华逸家汽车生活馆（即将开业）</Text>
                        <View style={{marginBottom:10}}>
                            <Text style={{fontSize:15,color:"#999",lineHeight:23}}>四川省成都市青羊区西三环光华大道一段商业停车场负一楼</Text>
                        </View>
                        <View style={{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
                            <Text style={{fontSize:15,color:"#999",lineHeight:23}}>10:00-20:00</Text>
                            <Text style={{fontSize:15,color:"#999",lineHeight:23}}>028-60159510</Text>
                        </View>
                    </View>
                    <View style={styles.goodsCenter}>
                        <Text style={{fontSize:18,lineHeight:23}}>商品中心</Text>
                        <Text style={{fontSize:18,color:"#999",lineHeight:23}}>套餐购买</Text>
                    </View>
                    <View style={styles.service}>
                        <View style={styles.serviceTab}>
                            <Text style={{fontSize:18}}>门店服务</Text>
                            <Text style={{fontSize:18}}>优惠券</Text>
                        </View>
                        <Service />
                    </View>
                </View>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    continer: {
        position: "relative",
        backgroundColor: "#fafafa",
        height: 1000
    },
    banner: {    
        height: 160
    },
    body:{
        position: "absolute",
        top: 70,
    },
    info: {
        marginTop: -70,
        borderRadius: 10,
        padding: 20,
        margin: 20,
        backgroundColor: "white",
        zIndex: 99
    },
    goodsCenter: {
        display: "flex",
        flexDirection:"row",
        justifyContent: 'space-between',
        alignItems: "center",
        borderRadius: 10,
        padding: 20,
        marginLeft: 20,
        marginBottom: 20,
        marginRight: 20,
        height: 70,
        backgroundColor: "white",
    },
    service: {
        marginTop: 10
    },
    serviceTab: {
        display: "flex",
        flexDirection:"row",
        justifyContent: 'space-around',
        borderBottomWidth: 1,
        borderBottomColor: "#ccc",
        padding: 20,
        borderStyle: "solid"
    },
});